<template>
  <el-container>
    <el-aside width="220px" v-if="!currentId" v-loading="showDicloading">
      <el-container>
        <el-header>
          <el-input placeholder="输入关键字进行过滤" v-model="dicFilterText" clearable></el-input>
        </el-header>
        <el-main class="nopadding">
          <el-tree
            ref="dic"
            class="menu"
            node-key="dataDicId"
            :data="dicList"
            :props="dicProps"
            highlight-current
            :expand-on-click-node="false"
            :filter-node-method="dicFilterNode"
            @node-click="dicClick"
          >
            <template #default="{ node, data }">
              <span class="custom-tree-node">
                <span class="label">{{ node.label }}</span>
                <span class="code">{{ data.code }}</span>
              </span>
            </template>
          </el-tree>
        </el-main>
      </el-container>
    </el-aside>
    <el-container class="is-vertical">
      <el-main class="nopadding">
        <AiGenerate :ai-node="currentNode" v-show="currentNode != null"></AiGenerate>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import AiGenerate from './AiGenerate';
export default {
  name: 'aiIndex',
  components: {
    AiGenerate,
  },
  data() {
    return {
      currentNode: null,
      activeAiType: 'chat',
      showDicloading: false,
      dicList: [],
      dicFilterText: '',
      dicProps: {
        label: 'name',
      },
      listApiParams: {
        dataDicType: 'keyvalue',
      },
      selection: [],
      currentId: '',
    };
  },
  watch: {
    dicFilterText(val) {
      this.$refs.dic.filter(val);
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.currentId = this.$route.query.id;
      this.getDic();
    });
  },
  methods: {
    //加载树数据
    async getDic() {
      let response = await this.$API.aiApplication.page.get({
        page: 1,
        pageSize: 100000,
      });
      let list = response.data.rows;
      if (!list || list.length <= 0) {
        // 这里开始
        return;
      }
      this.dicList = [];
      // 开始渲染
      list.forEach(item => {
        var o = {
          code: item.chatType,
          dataDicType: 'keyvalue',
          dataDicId: item.id,
          children: [],
          name: item.name,
          type: item.chatType,
        };
        if (this.currentId && item.id == this.currentId) {
          this.currentNode = o;
        }
        this.dicList.push(o);
      });
    },
    //树过滤
    dicFilterNode(value, data) {
      if (!value) return true;
      var targetText = data.name + data.code;
      return targetText.indexOf(value) !== -1;
    },
    //树点击事件
    dicClick(data) {
      console.log(data);
      this.currentNode = data;
      // this.activeAiType = data.type;
    },
  },
};
</script>

<style scoped>
.custom-tree-node {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 24px;
  height: 100%;
}
.custom-tree-node .code {
  font-size: 12px;
  color: #999;
}
.custom-tree-node .do {
  display: none;
}
.custom-tree-node:hover .code {
  display: none;
}
.custom-tree-node:hover .do {
  display: inline-block;
}
</style>
